<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-02 09:38:51
 * @LastEditTime : 2021-09-06 09:43:40
 * @FilePath     : /smallnewhope/src/components/reward/index.vue
 * @Description  : 
-->
<script setup lang="ts">
import { Mask, Perm } from "/@/components";
import { withDefaults } from "vue";
import gameInstructions from "/@/assets/images/gameInstructions.png"; // 奥特兰牛奶 10元优惠卷
import receive from "/@/assets/images/receive.png";
const props = withDefaults(defineProps<{ src: string; buttonSrc: string }>(), {
  src: gameInstructions,
  buttonSrc: receive,
});
props;
</script>

<template>
  <div class="reward">
    <slot name="img">
      <img class="winThePrize" :src="props.src" />
    </slot>
    <slot name="button">
      <Perm />
      <!-- <img :src="props.buttonSrc" alt="receive" class="doawButton" /> -->
    </slot>
    <Mask />
  </div>
</template>

<style lang="scss" scoped>
.winThePrize {
  position: absolute;
  top: 146px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  width: 317px;
  height: 395px;
}
.reward {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.doawButton {
  width: 152px;
  height: 36px;
  position: absolute;
  //   bottom: 102px;
  top: 581px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
}
</style>
